<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="../element-plus/index.css" />
  </head>
  <body>
    <div id="box">
      <!-- v-bind:rules  简写 :rules -->
      <el-form
        :model="form"
        :rules="rules"
        label-width="120px"
        ref="ruleFormRef"
      >
        <!-- prop 绑定验证规则  rules.name -->
        <el-form-item label="Activity name" prop="name">
          <el-input v-model="form.name" />
        </el-form-item>
        <el-form-item label="Activity zone" prop="region">
          <el-select
            v-model="form.region"
            placeholder="please select your zone"
          >
            <el-option label="Zone one" value="shanghai"></el-option>

            <el-option label="Zone two" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="Activity time" prop="date1">
          <el-col :span="11">
            <el-date-picker
              v-model="form.date1"
              type="date"
              placeholder="Pick a date"
              style="width: 100%"
            />
          </el-col>
          <el-col :span="2" class="text-center">
            <span class="text-gray-500">-</span>
          </el-col>
          <el-col :span="11">
            <el-form-item prop="date2">
              <el-time-picker
                v-model="form.date2"
                placeholder="Pick a time"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
        </el-form-item>
        <el-form-item label="Instant delivery" prop="delivery">
          <el-switch v-model="form.delivery" />
        </el-form-item>
        <el-form-item label="Activity type" prop="type">
          <el-checkbox-group v-model="form.type">
            <el-checkbox label="Online activities" name="type"></el-checkbox>
            <el-checkbox label="Promotion activities" name="type"></el-checkbox>
            <el-checkbox label="Offline activities" name="type"></el-checkbox>
            <el-checkbox
              label="Simple brand exposure"
              name="type"
            ></el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="Resources" prop="resource">
          <el-radio-group v-model="form.resource">
            <el-radio label="Sponsor"></el-radio>
            <el-radio label="Venue"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="Activity form" prop="desc">
          <el-input v-model="form.desc" type="textarea" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit('ruleFormRef')"
            >Create</el-button
          >
          <el-button>Cancel</el-button>
        </el-form-item>
      </el-form>
    </div>
    <script src="../vue3.2.45.js"></script>
    <script src="../element-plus/element-plus.js"></script>
    <script>
      const app = Vue.createApp({
        data() {
          return {
            // 表单值
            form: {
              name: "",
              region: "",
              date1: "",
              date2: "",
              delivery: false,
              type: [],
              resource: "",
              desc: "",
            },
            // 表单校验规则
            rules: {
              name: [
                {
                  required: true,
                  message: "Please input Activity name",
                  trigger: "blur",
                },
                {
                  min: 3,
                  max: 5,
                  message: "Length should be 3 to 5",
                  trigger: "blur", // 失去焦点时
                },
              ],
              region: [
                {
                  required: true,
                  message: "Please select Activity zone",
                  trigger: "change", // 值发生变化时
                },
              ],
              count: [
                {
                  required: true,
                  message: "Please select Activity count",
                  trigger: "change",
                },
              ],
              date1: [
                {
                  type: "date",
                  required: true,
                  message: "Please pick a date",
                  trigger: "change",
                },
              ],
              date2: [
                {
                  type: "date",
                  required: true,
                  message: "Please pick a time",
                  trigger: "change",
                },
              ],
              type: [
                {
                  type: "array",
                  required: true,
                  message: "Please select at least one activity type",
                  trigger: "change",
                },
              ],
              resource: [
                {
                  required: true,
                  message: "Please select activity resource",
                  trigger: "change",
                },
              ],
              desc: [
                {
                  required: true,
                  message: "Please input activity form",
                  trigger: "blur",
                },
              ],
            },
          };
        },
        methods: {
          onSubmit(formName) {
            // ref vue3, 类似于 java应用数据类型
            // this.$data
            this.$refs[formName].validate((valid) => {
              if (valid) {
                console.log("submit!");
              } else {
                console.log("error submit!");
                return false;
              }
            });
            console.log(this.form);
          },
        },
      });

      // 使用 ElementPlus 组件
      app.use(ElementPlus);
      // 挂载到 box
      app.mount("#box");
    </script>
  </body>
</html>
